<template>
<div class="detail">
    <div class="container">
        <h2>{{$t('fabi.detail[0]')}} {{order.oop_name}} <span v-if="order.o_type==2">{{$t('fabi.detail[1]')}}</span><span v-else>{{$t('fabi.detail[2]')}}</span> {{order.total_num-0}} {{order.code}}</h2>
        <div class="block">
            <p class="order_no">{{$t('fabi.detail[3]')}}：{{order.order_no}}
                <span v-if="order.status==1">{{$t('fabi.detail[4]')}}</span>
                <span v-if="order.status==2">{{$t('fabi.detail[5]')}}</span>
                <span v-if="order.status==3">{{$t('fabi.detail[6]')}}</span>
                <span v-if="order.status==4">{{$t('fabi.detail[7]')}}</span>
                <span v-if="order.status==5">{{$t('fabi.detail[8]')}}</span>
                <span v-if="order.status==6">{{$t('fabi.detail[9]')}}</span>
                <!-- 1待付款 2已付款 3已确认完成 4 申述中 5取消 6冻结 -->
            </p>
            <p class="info">
                <span>{{$t('fabi.detail[10]')}}：{{order.total_price}} CNY</span>
                <span>{{$t('fabi.detail[11]')}}：{{order.total_num-0}} {{order.code}}</span>
                <span>{{$t('fabi.detail[12]')}}：{{order.price}} CNY</span>
            </p>
        </div>
        <!-- <div class="tips">备注信息：请在下单前先确认支付方式，领最全部购买</div> -->
        <div class="block">
            <h4>{{$t('fabi.detail[13]')}}：</h4>
            <p>{{$t('fabi.detail[14]')}}：{{order.oop_name}}</p>
            <p>{{$t('fabi.detail[15]')}}：{{order.oop_mobile}}</p>
        </div>
        <!--  买家看到卖方的收款信息（只有待支付状态）2. 卖方看到自己的收款信息（待支付，待放币，申诉）3. 卖方看到对方的上传凭证（ -->
        <div class="block" v-if="(order.o_type==2&&order.status==1)||(order.o_type==1 &&(order.status==1||order.status==2||order.status==4))">
            <h4>{{$t('fabi.detail[16]')}}：</h4>
            <p class="bank">
                <template v-if="order.pay_list.payment_type==1">
                    <img src="../../assets/img/icon-yinlian.png" alt=""><span>{{$t('fabi.detail[17]')}}</span>
                </template>
                <template v-if="order.pay_list.payment_type==2">
                    <img src="../../assets/img/icon-alipay.png" alt=""><span>{{$t('fabi.detail[18]')}}</span>
                </template>
                <template v-if="order.pay_list.payment_type==3">
                    <img src="../../assets/img/icon_weixin.png" alt=""><span>{{$t('fabi.detail[19]')}}</span>
                </template>
                <span>{{order.pay_list.card_num}}</span>
                <span>{{order.pay_list.auth_name}}</span>
            </p>
            <p v-if="order.pay_list.payment_type==1">{{order.pay_list.bank}} <span>{{order.pay_list.branch}}</span></p>
            <div class="qrcode" v-else @click="showQrcode = true">
                <p v-if="!showQrcode"><i class="el-icon-s-grid" style="font-size: 50px;"></i> {{$t('fabi.detail[20]')}}</p>
                <img :src="order.pay_list.qrcode" alt="" v-else>
            </div>
        </div>
        <template v-if="order.status==1">
            <!-- 未付款 -->
            <div class="block" v-if="order.o_type==2&&false">
                <h4>{{$t('fabi.detail[21]')}}：</h4>
                <el-upload :action="uploadUrl" :headers="headers" class="uploader" :show-file-list="false" :on-success="uploadSuccess" :before-upload="beforeupload">
                    <img :src="imgUrl" alt="">
                    <span class="upload_text" v-if="!file">{{$t('fabi.detail[22]')}} {{$t('fabi.detail[23]',{num:2})}}</span>
                </el-upload>
            </div>
            <div class="status">
                <p v-if="order.o_type==2">{{$t('fabi.detail[24]')}}<span>{{timeText}}</span>{{$t('fabi.detail[25]',{name:order.oop_name})}} </p>
                <p v-if="order.o_type==1">{{$t('fabi.detail[26]')}}，{{order.oop_name}}{{$t('fabi.detail[27]')}}<span>{{timeText}}</span>{{$t('fabi.detail[28]')}}</p>
                <p>{{$t('fabi.detail[29]')}}：（{{order.refer}}）</p>
            </div>
            <div class="tips1" v-if="order.o_type==2">
                <i class="el-icon-info"></i>
                <p>{{$t('fabi.detail[30]')}}<span>“{{$t('fabi.detail[31]')}}”</span>{{$t('fabi.detail[32]')}}！</p>
                <p>{{$t('fabi.detail[33]')}}</p>
            </div>
        </template>
        <template v-if="order.status==2">
            <!-- 已付款 待放币 -->
            <div class="block" v-if="false">
                <h4>{{$t('fabi.detail[34]')}}：</h4>
                <div class="uploader">
                    <el-image fit="cover" :src="imgUrl" :preview-src-list="[imgUrl]"></el-image>
                </div>
            </div>
            <div class="status">
                <p v-if="order.o_type==2">{{$t('fabi.detail[35]')}}。</p>
                <p v-if="order.o_type==1">{{$t('fabi.detail[36]')}}</p>
                <p>{{$t('fabi.detail[46]')}}：（{{order.refer}}）</p>
            </div>
            <div class="tips1">
                <i class="el-icon-info"></i>
                <p v-if="order.o_type==2">{{$t('fabi.detail[37]')}}<span> {{timeText}}</span>{{$t('fabi.detail[42]')}}；</p>
                <p v-if="order.o_type==1">{{$t('fabi.detail[39]')}}<span>“{{$t('fabi.detail[40]')}}”</span>{{$t('fabi.detail[41]')}}<span> {{timeText}}</span>{{$t('fabi.detail[42]')}}；{{$t('fabi.detail[43]')}}；</p>
            </div>
        </template>
        <template v-if="order.status==3">
            <!-- 已完成 -->
            <div class="status" v-if="order.command&&order.o_type==1">{{$t('fabi.detail[44]')}}：（{{order.command}}）</div>
            <div class="status" v-else> {{$t('fabi.detail[45]')}}, {{$t('fabi.detail[46]')}}：（{{order.refer}}）</div>
            <!-- 申诉失败 强制完成 -->
            <div class="tips1" v-if="order.command&&order.o_type==1">
                <i class="el-icon-info"></i>
                <p>{{$t('fabi.detail[47]')}}。</p>
                <!-- <p>{{order.pan_reason}}</p> -->
            </div>
        </template>
        <template v-if="order.status==4">
            <!-- 申诉中 -->
            <div class="status">
                <p>{{$t('fabi.detail[48]')}}：（{{order.command}}）</p>
            </div>
            <div class="tips2" v-if="order.o_type==2">
                <p>{{$t('fabi.detail[49]')}}；</p>
                <p>{{$t('fabi.detail[50]',{email:'service.@VIP.163.com'})}}。</p>
                <p>{{$t('fabi.detail[51]')}}！</p>
            </div>
        </template>
        <template v-if="order.status==5">
            <!-- 已取消 -->
            <!-- 申诉成功 取消 -->
            <div class="tips1" v-if="order.command&&order.o_type==1">
                <i class="el-icon-info"></i>
                <p>{{$t('fabi.detail[52]')}}</p>
            </div>
            <!-- 正常取消 -->
            <div class="status" v-else>
                <p>{{$t('fabi.detail[53]')}}</p>
                <!-- <p>您已选择取消订单</p> -->
            </div>
        </template>

        <div class="btns">
            <el-button type="primary" v-if="order.status==1&&order.o_type==2" @click="confirmPay">{{$t('fabi.detail[54]')}}</el-button>
            <el-button type="danger" v-if="order.status==1&&order.o_type==2" @click="showDialog = true">{{$t('fabi.detail[55]')}}</el-button>
            <el-button type="primary" v-if="order.status==2&&order.o_type==1" @click="showDialog1 = true">{{$t('fabi.detail[40]')}}</el-button>
            <el-button type="danger" v-if="order.status==2&&order.o_type==1" @click="showDialog2 = true">{{$t('fabi.detail[56]')}}</el-button>
        </div>
        <div class="tips2" v-if="order.status!=4">
            <h4>{{$t('fabi.detail[57]')}}：</h4>
            <p>1、{{$t('fabi.detail[58]')}}。</p>
            <p>2、{{$t('fabi.detail[61]')}}。</p>
            <p>3、{{$t('fabi.detail[62]')}}。</p>
        </div>
    </div>
    <!-- 确认框 -->
    <el-dialog title="取消订单" width="40%" top="25vh" :visible.sync="showDialog">
        <div class="dialog_inner">
            <div class="item">{{$t('fabi.detail[64]')}}？ </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="showDialog = false">{{$t('fabi.detail[66]')}}</el-button>
            <el-button type="primary" @click="cancelOrder">{{$t('fabi.detail[65]')}}</el-button>
        </div>
    </el-dialog>
    <el-dialog :title="$t('fabi.detail[67]')" width="40%" top="25vh" :visible.sync="showDialog1">
        <div class="dialog_inner">
            <div class="item">
                <div class="label">{{$t('fabi.detail[68]')}}</div>
                <div class="input">
                    <el-input type="password" v-model="password" :placeholder="$t('fabi.detail[69]')"></el-input>
                </div>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="showDialog1 = false">{{$t('fabi.detail[66]')}}</el-button>
            <el-button type="primary" @click="confirmOrder">{{$t('fabi.detail[65]')}}</el-button>
        </div>
    </el-dialog>
    <el-dialog :title="$t('fabi.detail[70]')" width="40%" top="25vh" :visible.sync="showDialog2">
        <div class="dialog_inner">
            <div class="item">
                <div class="label">{{$t('fabi.detail[71]')}}</div>
                <div class="input">
                    <el-input type="textarea" v-model="reason" :placeholder="$t('fabi.detail[72]')"></el-input>
                </div>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="showDialog2 = false">{{$t('fabi.detail[66]')}}</el-button>
            <el-button type="primary" @click="appealOrder">{{$t('fabi.detail[65]')}}</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import {
    uploadimages
} from '@/api/authentication'
import {
    orderdetail,
    cancelorder,
    payorder,
    confirm,
    appeal
} from '@/api/fbTrade'
import {
    getToken,
    Passwordencryption
} from '@/libs/util'
export default {
    name: 'detail',
    data() {
        return {
            order: {
                pay_list: {
                    payment_type: 1
                }
            },
            imgUrl: require('../../assets/img/upload.png'),
            uploadUrl: uploadimages(),
            headers: {
                "Authorization": "Bearer " + getToken("token"),
                "from": "pc"
            },
            file: '',
            showDialog: false,
            showDialog1: false,
            showDialog2: false,
            password: '',
            reason: '',
            timermain: null, //5s刷新
            timer: null, // 倒计时
            timeText: '',
            showQrcode: false
        }
    },
    created() {
        this.getData()
    },
    beforeDestroy() {
        clearInterval(this.timermain);
        this.timermain = null;
        clearInterval(this.timer);
        this.timer = null;
    },
    methods: {
        getData(hideloading) {
            let that = this
            let data = {
                order_no: this.$route.query.order_no,
            }
            clearInterval(this.timer);
            orderdetail(data,hideloading).then(res => {

                this.order = res
                that.timermain = setTimeout(() => {
                    this.getData(true)
                }, 5000)
                if (res.status == 2) {
                    this.imgUrl = res.pay_screen
                }
                if (res.status == 1 || res.status == 2) {
                    // 重新获取前清除
                    clearInterval(this.timer);
                    this.timer = null;

                    let timeout = res.down_time;
                    that.timer = setInterval(() => {
                        // let hours = parseInt(timeout / 60 / 60);
                        let minates = parseInt((timeout / 60) % 60)
                        let secouds = timeout % 60;
                        if (minates) {
                            that.timeText = minates + this.$t('fabi.detail[73]') + secouds + this.$t('fabi.detail[74]');
                        } else {
                            that.timeText = secouds + this.$t('fabi.detail[74]');
                        }
                        // console.log(timeout)
                        if (timeout <= 0) {
                            clearInterval(that.timer);
                            that.timeText = "0" + this.$t('fabi.detail[74]');
                            // that.getData();
                        }
                        timeout--
                    }, 1000);
                }

            })
        },
        beforeupload(file) {
            let than = this;
            if (file.size > 2 * 1024 * 1024) {
                this.$message.error(this.$t('fabi.detail[75]') + '2M');
                return
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                than.imgUrl = e.target.result;
            };
        },
        uploadSuccess(res) {
            // console.log(res)
            if (res.status_code == 200) {
                this.file = res.data.relative_path;
            };
        },
        confirmPay() {
            // if (!this.file) {
            //     this.$message.error(this.$t('fabi.detail[76]'));
            //     return
            // }
            let data = {
                order_no: this.$route.query.order_no,
                pay_screen: this.file
            }

            payorder(data).then(res => {
                this.$message.success("操作成功");
                this.getData()

            })
        },
        cancelOrder() {
            let data = {
                order_no: this.$route.query.order_no
            }
            cancelorder(data).then(res => {

                this.$message.success("操作成功");
                this.showDialog = false
                this.getData()

            })
        },
        confirmOrder() {
            let data = {
                order_no: this.$route.query.order_no,
                payment_password: this.password
            }
            confirm(Passwordencryption(data)).then(res => {

                this.$message.success("操作成功");
                this.showDialog1 = false
                this.getData()

            })
        },
        appealOrder() {
            let data = {
                refer: this.order.refer,
                order_no: this.$route.query.order_no,
                reason: this.reason
            }
            appeal(data).then(res => {

                this.$message.success("操作成功");
                this.showDialog2 = false
                this.getData()

            })
        },
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="less" scoped>
.detail {
    .container {
        width: 1280px;
        margin: 0 auto;
        color: #fff;

        h2 {
            padding: 50px 0;
            font-weight: bold;

            span {
                color: #357CE1;
            }
        }

        h4 {
            font-size: 22px;
            line-height: 60px;
        }

        p {
            line-height: 40px;
        }

        .block {
            padding: 20px 0;
            border-bottom: 1px solid #243141;

            .order_no {
                span {
                    float: right;
                    color: #357CE1;
                }
            }

            .info span {
                margin-right: 100px;
            }

            .qrcode img {
                width: 200px;
                // vertical-align: middle;
            }
        }

        .tips {
            background-color: #182330;
            line-height: 50px;
            padding: 0 40px;
        }

        .bank {
            img {
                vertical-align: middle;
                margin-right: 10px;
            }

            span {
                margin-right: 20px;
            }
        }

        .uploader {

            img,
            .el-image {
                margin-right: 10px;
                max-width: 200px;
            }

            .upload_text {
                // color: #999;
            }
        }

        .status {
            font-size: 22px;
            margin-top: 30px;

            span {
                color: #357CE1;
            }
        }

        .tips1 {
            margin-top: 30px;

            i {
                float: left;
                font-size: 30px;
                color: #357CE1;
                margin-top: 5px;
                margin-bottom: 30px;
                margin-right: 10px;
            }

            span {
                color: #357CE1;
            }
        }

        .btns {
            margin-top: 30px;

            button {
                width: 200px;
                height: 60px;
                font-size: 18px;
            }
        }

        .tips2 {
            margin-top: 30px;

            p {
                color: #8E8E93;
            }
        }
    }

    .dialog_inner {
        .item {
            color: #fff;
        }

        .dialog-footer {
            text-align: center;

            button {
                width: 150px;
            }
        }
    }
}
</style>
